<template>
  <el-menu class='nav-container'>
    <!-- <SideBarItem  :index="item.path" v-for='(item, index) in routes' :key='index' :item='item'></SideBarItem> -->
    <template v-for="(item, index) in menuList" :item="item">
      <el-submenu v-if="item.children && item.children.length > 1" :key="index" :index="item.path">
        <span slot="title">{{ item.meta.title }}</span>
        <el-menu-item :key="idx" v-for="(k, idx) in item.children" :index="k.path" @click='routeTo(item.path+"/"+k.path)'>
          <span> {{ k.meta.title }}</span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :key="item.path" @click='routeTo(item.children ? item.children[0].path : item.path)'>
        <span slot="title">
          <template v-if="item.children">
            {{item.children[0].meta.title}}
          </template>
          <template v-else>
            {{ item.meta.title }}
          </template>
        </span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import SideBarItem from './SideBarItem'

import { routes } from "@/router/index.js";
console.log(routes)

export default {
  name: 'NavBar',
  components: {
    SideBarItem
  },
  data () {
    return {
      isCollapse: false,
      menuList: routes
    }
  },
  methods: {
    changeOpen () {
      this.isCollapse = !this.isCollapse
    },
    routeTo (path) {
      this.$router.push({
        path,
        query: {
          t: Date.now()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.nav-container {
  background-color: #304156;
  color: rgb(191, 203, 217);

  /deep/ .el-menu {
    background: inherit;
  }

  /deep/ a {
    color: inherit;
    text-decoration: none;
  }

  /deep/ .el-menu-item {
    color: rgb(191, 203, 217);
    &:hover {
      background: #001528 !important;
    }
  }

  /deep/ .el-menu-item.is-active {
    color: #409eff;
  }
  /deep/ .el-submenu__title {
    color: rgb(191, 203, 217);
    &:hover {
      background: #001528 !important;
    }
  }
}
</style>
